
import type { Props } from 'vue-loading-overlay';
import Loading from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/css/index.css';

// * https://github.com/ankurk91/vue-loading-overlay

type Tprops = {
  isLoading: boolean
}

const LoadingCom = (props: Props & Tprops, ctx: any) => {
  // 传递参数
  const {
    isFullPage = false,
    isLoading = false,
    canCancel = false,
    width = '120px',
    height = '100px',
    backgroundColor,
    loader='dots',
    color = '#1677ff',
    opacity,
    zIndex,
    transition,
    onCancel,
  } = props

  return (
    <div class="w-full h-full min-w-full min-h-full">
      {
        // @ts-ignore
        isLoading ? <Loading
          active={ isLoading }
          can-cancel={ canCancel }
          is-full-page={ isFullPage }
          loader={loader}
          background-color={backgroundColor}
          color = {color}
          width={ width }
          height={ height }
          on-cancel={ onCancel }
          opacity = { opacity }
          z-index = { zIndex }
          transition = { transition }
        /> :  <>
        { ctx.slots.default() }
        </>
      }
  </div>
  )
}
export default LoadingCom
